<template>
  <ul class="contextmenu-box" v-bind:style="{top : top + 'px' , left : left + 'px'}" :data-active="tab.active">
      <li class="contextmenu-item" :class="{ disabled : disabled.this }" @click.stop="closeTab('this',$event)">关闭当前标签页</li>
      <li class="contextmenu-item" :class="{ disabled : disabled.other }" @click.stop="closeTab('other',$event)">关闭其他标签页</li>
      <li class="contextmenu-item" :class="{ disabled : disabled.all }" @click.stop="closeTab('all',$event)">关闭所有标签页</li>
    </ul>
</template>
<script>
import common from '@mixins/common.js'
import pushRouter from '@mixins/router/pushRouter.js'
export default {
  mixins: [common, pushRouter],
  data () {
    return {
      disabled: {
        this: true,
        other: true,
        all: true
      }
    }
  },
  props: {
    top: Number,
    left: Number,
    tabIndex: Number
  },
  computed: {
    tab: function() {
      let tab = this.$store.state.tab;
      let length = tab.list.length;
      this.disabled.this = false;
      this.disabled.other = false;
      this.disabled.all = false;
      if(length > 0) {
        if(length == 1) {
          this.disabled.other = true;
        }
      } else {
        this.disabled.this = true;
        this.disabled.other = true;
        this.disabled.all = true;
      }
      return tab;
    }
  },
  methods: {
    closeTab (flag, e) {
      if($(e.target).hasClass('disabled')){return;}
      let _tabList = this.tab.list;
      let _active = this.tab.active;
      let _index = this.tabIndex;
      let to_menu_url = '';
      switch(flag) {
        case 'this' :
          if(_active == _tabList.length - 1 || _index < _active){
            _active --;
          }
          _tabList.splice(_index, 1);
          if(_active > -1){
            to_menu_url = this.tab.list[_active].url;
          }
          console.log(to_menu_url)
          this.pushRouterTo(to_menu_url);
          this.$store.commit('SET_SYNCHRONIZEMENU');
          break;
        case 'other' : 
          if(_index != _active) {
            to_menu_url = this.tab.list[_index].url;
            this.pushRouterTo(to_menu_url);
          }
          _tabList = _tabList.splice(_index, 1);
          _active = 0;
          break;
        case 'all' : 
          _tabList = [];
          _active = -1;
          this.pushRouterTo(to_menu_url);
          break;
        default : break;
      }
      this.$store.commit('SET_TABLIST',{list: _tabList,active: _active});
      this.$store.commit('SET_SIDEMENULIST', {firstIndex: _active});
      this.$emit('closeFn');
    }
  }
}
</script>
<style lang="less">
@import "../../assets/less/base/variables.less";
.contextmenu-box {
  position:absolute;
  background: #FFF;
  /*border: 1px solid @greycc;*/
  padding: 4px 0px;
  border-radius: 4px;
  box-shadow: 2px 2px 8px @grey99,-1px -1px 8px @grey99;
  z-index: 99999999;
  li {
    padding: 5px 24px 5px 20px;
    font-size: 13px;
    color: @black;
    border-bottom: 1px solid @greydd;
    cursor: pointer;
    &:hover{
        background: @greyee;
        /*color: #FFF;*/
    }
    &:last-child {
      border-bottom: 0px;
    }
    &.disabled{
      color: @grey99;
      &:hover{
          background-color: #FFF;
          color: @grey99;
      }
    }
  }
}
.tab-list-wrapper{
  .contextmenu-box li {
    border-bottom: 0px;
  }
}
</style>